<template>
  <slot></slot>
</template>

<script type="text/javascript">
/* ✔ */
export default {
  name: "ee-hook",
  props: {
    /** 组件生命周期beforeCreate时触发
     * @type {function}
     */
    onBeforeCreate: Function,
    /** 组件生命周期created时触发
     * @type {function}
     */
    onCreated: Function,
    /** 组件生命周期beforeMount时触发
     * @type {function}
     */
    onBeforeMount: Function,
    /** 组件生命周期mounted时触发
     * @type {function((RendererNode | RendererNode[]))} - 参数为插槽传入的根DOM元素
     */
    onMounted: Function,
    /** 组件生命周期beforeUpdate时触发
     * @type {function}
     */
    onBeforeUpdate: Function,
    /** 组件生命周期updated时触发
     * @type {function}
     */
    onUpdated: Function,
    /** 组件生命周期beforeUnmount时触发
     * @type {function}
     */
    onBeforeUnmount: Function,
    /** 组件生命周期unmounted时触发
     * @type {function}
     */
    onUnmounted: Function,
  },
  beforeCreate() {
    this.onBeforeCreate?.();
  },
  created() {
    this.onCreated?.();
  },
  beforeMount() {
    this.onBeforeMount?.();
  },
  mounted() {
    let slot = this.$slots.default();
    if (slot.length > 1)
      this.onMounted?.(slot.map(i => i.el));
    else
      this.onMounted?.(slot[0].el);
  },
  beforeUnmount() {
    this.onBeforeUnmount?.();
  },
  updated() {
    this.onUpdated?.();
  },
  beforeUnmount() {
    this.onBeforeUnmount?.();
  },
  unmounted() {
    this.onUnmounted?.();
  }
}
</script>